<template>
  <div class="headerTitle">公积金信息</div>
  <div class="mainArea">
    <div class="formItem">
      <up-form
        labelPosition="left"
        labelWidth="300rpx"
        labelStyle="color:#666666;font-size:28rpx"
        :model="sbInfo"
      >
        <up-form-item
          label="社保单位名称"
          prop="orgName"
          borderBottom
          customStyle="width:100%;"
        >
          <up-input
            v-model="sbInfo.orgName"
            border="none"
            color="#999999"
            fontSize="28rpx"
            placeholder="请输入"
            placeholderStyle="color:#999999 !important;font-size:28rpx !important;"
            inputAlign="right"
          ></up-input>
        </up-form-item>
      </up-form>
    </div>
    <div class="areaItem">
      <div class="itemTitle">社保参保地</div>
      <div class="itemValue" @click="sbAdressShow = true">
        <div>
          {{ sbInfo.sbAdress ? sbInfo.sbAdress : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <!-- #待更待 -->
        <up-picker
          :show="sbAdressShow"
          :columns="sbAdressCols"
          :defaultIndex="[0]"
          @cancel="sbAdressShow = false"
          @confirm="checkSbAdress"
        ></up-picker>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">社保参保状态</div>
      <div class="itemValue" @click="sbStateShow = true">
        <div>
          {{ sbInfo.sbState ? sbInfo.sbState : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <!-- #待更待 -->
        <up-picker
          :show="sbStateShow"
          :columns="sbStateCols"
          :defaultIndex="[0]"
          @cancel="sbStateShow = false"
          @confirm="checkSbState"
        ></up-picker>
      </div>
    </div>
    <div class="formItem">
      <up-form
        labelPosition="left"
        labelWidth="300rpx"
        labelStyle="color:#666666;font-size:28rpx"
        :model="sbInfo"
      >
        <up-form-item
          label="养老保险缴费基数"
          prop="payBaseNum"
          borderBottom
          customStyle="width:100%;"
        >
          <up-input
            v-model="sbInfo.payBaseNum"
            border="none"
            color="#999999"
            fontSize="28rpx"
            placeholder="请输入"
            placeholderStyle="color:#999999 !important;font-size:28rpx !important;"
            inputAlign="right"
          ></up-input>
        </up-form-item>
      </up-form>
    </div>
    <div class="areaItem">
      <div class="itemTitle">现单位公积金起缴日期</div>
      <div class="itemValue" @click="payStartDateShow = true">
        <div>
          {{ sbInfo.payStartDate ? sbInfo.payStartDate : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <up-datetime-picker
          hasInput
          :show="payStartDateShow"
          mode="date"
          @cancel="payStartDateShow = false"
          :minDate="startTime"
          :maxDate="nowTime"
          @confirm="checkpayStartDate"
        ></up-datetime-picker>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">养老保险最新缴费日期</div>
      <div class="itemValue" @click="payLatestDateShow = true">
        <div>
          {{ sbInfo.payLatestDate ? sbInfo.payLatestDate : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <!-- #待更待 -->
        <up-datetime-picker
          hasInput
          :show="payLatestDateShow"
          mode="date"
          @cancel="payLatestDateShow = false"
          :minDate="startTime"
          :maxDate="nowTime"
          @confirm="checkpayLatestDate"
        ></up-datetime-picker>
      </div>
    </div>
  </div>

  <div class="headerTitle">材料要求</div>
  <div class="askArea">
    <div class="askItem">1、提供支付宝公积金查询详细照片</div>
    <div class="askItem">2、提供缴存单位企业查查信息详细照片</div>
  </div>

  <div class="headerTitle">相关证明材料影像件</div>
  <div class="mainArea">
    <up-textarea
      v-model="moreInfo"
      placeholder="请输入"
      autoHeight
      border="none"
    >
    </up-textarea>
    <div class="addImgArea">
      <img
        src="../../static/face/new_icon_01.png"
        alt=""
        class="chooseImg"
        @click="chooseImg"
      />
    </div>
    <div class="btnArea">
      <div class="btn close" @click="closePage">关闭</div>
      <div class="btn save" @click="savePage">保存</div>
    </div>
  </div>
</template>

<script setup>
import * as utils from "../../utils/utils";
import { ref, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import * as http from "../../utils/http";
import { useImagePicker } from '@/hooks/useImagePicker';
const { imgList, chooseImg, uploadFiles } = useImagePicker();
const startTime = ref(0);
const nowTime = ref(0);
onMounted(() => {
  let startDate = new Date("1980-01-01 00:00:00");
  startTime.value = startDate.getTime(); //开始时间戳
  let nowDate = new Date();
  nowTime.value = nowDate.getTime(); //当前时间戳
});
const isCheck = ref(false);
let orderId = null;
onLoad((option) => {
  let param = JSON.parse(option.value);
  if (param.isCheck) {
    isCheck.value = true;
    http.creditSocialSecurityDetail().then((res) => {
      sbInfo.orgName = res.data.securityCompany;
      sbInfo.sbAdress = res.data.securityCity;
      sbInfo.sbState = res.data.isBreak;
      sbInfo.payBaseNum = res.data.securityBase;
      sbInfo.payStartDate = res.data.depositStartDate;
      sbInfo.payLatestDate = res.data.lastDepositDate;
      moreInfo.value = res.data.supplementExplain;
    });
  } else {
    orderId = param.orderId;
  }
});
const moreInfo = ref("");
const sbInfo = reactive({
  orgName: "", //社保单位名称
  sbAdress: "", //社保参保地
  sbState: "", //社保参保状态
  payBaseNum: "", //养老保险缴费基数
  payStartDate: "", //现单位养老保险起缴日期
  payLatestDate: "", //养老保险最新缴费日期
});
// 社保参保地
const sbAdressShow = ref(false);
const sbAdressCols = reactive([
  ["合肥市", "蚌埠市", "六安市", "铜陵市", "宿州市", "其他城市"],
]);
const checkSbAdress = (e) => {
  sbInfo.sbAdress = e.value[0];
  sbAdressShow.value = false;
};
// 社保参保状态
const sbStateShow = ref(false);
const sbStateCols = reactive([["正常", "冻结", "暂停"]]);
const checkSbState = (e) => {
  sbInfo.sbState = e.value[0];
  sbStateShow.value = false;
};
// 现单位养老保险起缴日期
const payStartDateShow = ref(false);
const checkpayStartDate = (e) => {
  sbInfo.payStartDate = utils.getFormatDate(e.value);
  payStartDateShow.value = false;
};
// 养老保险最新缴费日期
const payLatestDateShow = ref(false);
const checkpayLatestDate = (e) => {
  sbInfo.payLatestDate = utils.getFormatDate(e.value);
  payLatestDateShow.value = false;
};

// 关闭
const closePage = () => {
  wx.navigateBack();
};
// 保存
const savePage = async () => {
  if (isCheck.value) {
    wx.navigateBack({ delta: 1 });
  } else {
    const fileInfoList = await uploadFiles();  
    console.log('fileInfoList----', fileInfoList);
    http
      .creditSocialSecurityAdd({
        creditFirstType: "2",
        creditSecondType: "2",
        orderId,
        creditId: store.creditId,
        securityCompany:sbInfo.orgName,
        securityCity:sbInfo.sbAdress,
        currentDepositStatus:sbInfo.sbState,
        securityBase:sbInfo.payBaseNum,
        depositStartDate:sbInfo.payStartDate,
        lastDepositDate:sbInfo.payLatestDate,
      })
      .then((res) => {
        wx.showToast({
          title: "保存成功",
          icon: "none",
          duration: 1000,
          mask: true,
        });
        setTimeout(() => {
          wx.navigateBack();
        }, 1000);
      })
      .catch((err) => {
        wx.showToast({
          title: "保存失败",
          icon: "none",
          duration: 1000,
          mask: true,
        });
      });
  }
};
</script>

<style scoped lang="scss">
.headerTitle {
  font-size: 24rpx;
  color: #666666;
  padding-top: 20rpx;
  padding-left: 34rpx;
  padding-bottom: 10rpx;
}
.askArea {
  padding: 10rpx 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #fff;
  .askItem {
    height: 50rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    color: #666666;
  }
}
.mainArea {
  background-color: #fff;
  padding: 0 35rpx;
  .formItem {
    padding-left: 5rpx;
    height: 88rpx;
    border-bottom: 1rpx solid #eeeeee;
  }
  .areaItem {
    padding-left: 5rpx;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #eeeeee;
    .itemTitle {
      font-size: 28rpx;
      color: #666666;
    }
    .itemValue {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 28rpx;
      color: #999;
      .selectIcon {
        width: 12rpx;
        height: 12rpx;
        border-top: 2rpx solid #999999;
        border-right: 2rpx solid #999999;
        transform: rotate(45deg);
        margin-left: 13rpx;
      }
    }
  }
  .addImgArea {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    .chooseImg {
      width: 90rpx;
      height: 82rpx;
      margin: 20rpx 10rpx;
    }
  }
  .btnArea {
    display: flex;
    padding: 40rpx 0;
    justify-content: center;
    align-items: center;
    .btn {
      width: 110rpx;
      height: 54rpx;
      line-height: 54rpx;
      text-align: center;
      color: #fff;
      font-size: 24rpx;
      border-radius: 8rpx;
      margin: 0 10rpx;
    }
    .close {
      background-color: #c0c0c0;
    }
    .save {
      background-image: linear-gradient(to right, #619df1, #4478c1);
    }
  }
}
</style>
